<template>
    <div class="product-items">
        <div class="product-list">
            <div class="product-item">
                <div class="product-image"><img src="" alt="image" /></div>
                <div class="product-info">
                    <h3 class="product-name">测试</h3>
                    <div class="product-excerpt">简单描述</div>
                    <div class="product-price">¥<span>35.00</span></div>
                    <van-button class="product-action" type="warning" size="small" plain>购买</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Button} from 'vant';
    export default {
        name: "ProductItems",
        components: {
            [Button.name]: Button
        }
    }
</script>

<style lang="scss" scoped>
    .product-list {
        padding: 10px;
        .product-item {
            display: flex;
            border: 1px solid #eaeaea;
            padding: 4px;
            margin-bottom: 10px;
            //图片
            .product-image {
                flex: 0 0 75px;
            }
            //信息
            .product-info {
                position: relative;
                flex: 1;
                padding-left: 10px;
                padding-bottom: 30px;
                //标题
                .product-name {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    line-height: 25px;
                }
                //描述
                .product-excerpt {
                    font-size: 12px;
                    line-height: 20px;
                    text-indent: 2em;
                }
                //价格
                .product-price {
                    position: absolute;
                    bottom: 0;
                    height: 30px;
                    font-size: 12px;
                    line-height: 30px;
                    color: #f30;
                    span {
                        font-size: 16px;
                    }
                }
                //按钮
                .product-action {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
</style>